
<template>
  <div v-if="show">
    <div class="modal-backdrop fade" :class="{ show: show }"></div>
    <div
      class="modal fade"
      :class="{ show: show }"
      :style="{ display: show ? 'block' : 'none' }"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">新建分类</h5>
            <button
              @click="hideModal"
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group input-group-sm mb-2">
                <label for="exampleInputEmail1">名称</label>
                <input
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  v-model="tag.title"
                  aria-describedby="emailHelp"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-sm btn-secondary"
              data-dismiss="modal"
              @click="hideModal"
            >取消</button>
            <button type="button" class="btn btn-sm btn-primary" @click="createCmd">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createTag } from "@/utils/tag";
// import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      isEdit: false,
      id: "",
      tag: {
        title: ""
      },
      show: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    openModal() {
      this.show = true;
      this.tag.title = "";
    },
    hideModal() {
      this.show = false;
      this.tag.title = "";
    },
    async createCmd() {
      await createTag(this.tag);
      this.$emit("confirm");
      this.hideModal();
    }
  }
};
</script>
<style scoped lang='scss'>
</style>
